<template>
	<div class="list">
		<div class="tab">
			<el-table
				:data="tableData"
				border
				style="width: 100%">
				<el-table-column
					type="index"
					label="序号"
					align='center'
					sortable
					width="100">
				</el-table-column>
				<el-table-column
					label="客户名称"
					align='center'
					width="250">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.clint_name }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="公司地址"
					align='center'
					width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.address }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="联系人姓名"
					align='center'
					width="300">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.contacts }}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="联系人电话"
					align='center'>
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.contacts_phone }}</span>
					</template>
				</el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200">
                    <template slot-scope="scope">
                    <el-button @click="update_client(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
			</el-table>
            <el-dialog title="标签信息修改" :visible.sync="dialogFormVisible">
            <el-form :model="form">
            <el-form-item label="客户名称：">
                    <el-input v-model="form.clint_name" style="width:200px"></el-input>
                </el-form-item>
                <el-form-item label="公司地址：">
                    <el-input v-model="form.address" style="width:200px"></el-input>
                </el-form-item>
                 <el-form-item label="联系人姓名：">
                    <el-input v-model="form.contacts" style="width:200px"></el-input>
                </el-form-item>
                 <el-form-item label="联系人电话：">
                    <el-input v-model="form.contacts_phone" style="width:200px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="update_client1()">确 定</el-button>
            </div>
            </el-dialog>
		</div>
		<div class="page">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="paginations.page_index"
			  :page-sizes="paginations.page_sizes"
			  :page-size="paginations.page_size"
			  :layout="paginations.layout"
			  :total="paginations.total">
			</el-pagination>
		</div>
	</div>
</template>
<script>
import{getclient,update_Client} from '../../api/api.js'
	export default {
		name:"list",
		data() {
			return {
				tableData:[], //数据
				paginations:{
					page_index:1, //当前页
					total:0, //总数
					page_size:5, //一页显示多少
					page_sizes:[5,10,15,20], //每页显示多少条
					layout:'total, sizes, prev, pager, next, jumper'
				},
                allTableData:[],
                form: {
                    clint_name: '',
                    address: '',
                    contacts: '',  
                    contacts_phone:''   
                },
                formLabelWidth: '100px',
                dialogFormVisible: false,
                id:''
			}
		},
		methods: {
            update_client1(){
            var params = {
                id :this.id,
                clint_name : this.form.clint_name,
                address : this.form.address,
                contacts : this.form.contacts,
                contacts_phone : this.form.contacts_phone,
            };
            update_Client(params).then(res=>{
                this.$message(res.message)
                this.$router.go(0);
          })
            },
            //客户信息修改
			update_client(index, row){
                this.id = row.id
                this.form.clint_name = row.clint_name
                this.form.address = row.address
                this.form.contacts = row.contacts
                this.form.contacts_phone = row.contacts_phone
				this.dialogFormVisible=true;
			},
			//获取所有客户信息
            all_client() {
                var params = {
            };
            getclient(params).then(res=>{
                console.log(res)
                const data = res.data;
                this.allTableData = data;
                this.setPaginations()
            })
            },
			setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			}
		},
		created(){
			this.all_client()
		}
	}
</script>

<style scoped>
	.list {
		margin: 20px;
	}
	.page {
		float: right;
		margin-top: 20px;
	}
</style>